.djs-palette,
.bts-toggle-mode,
.djs-minimap div.toggle,
.bjs-powered-by {
  display: none;
}

svg.new-parent {
  background: transparent !important;
}

.bjs-container {
  border: none;

  &.simulation {
    &::before {
      position: absolute;
      border: 4px solid var(--token-simulation-green-base-44);
      content: '';
      inset: 0;
    }

    .djs-container {
      z-index: 10;
    }
  }
}

.djs-parent {
  --bendpoint-fill-color: var(--el-color-primary);
  --bendpoint-stroke-color: var(--el-fill-color);
  --context-pad-entry-background-color: var(--el-fill-color-blank);
  --context-pad-entry-hover-background-color: var(--el-fill-color-blank);
  --element-dragger-color: var(--el-color-primary);
  --element-hover-outline-fill-color: var(--el-color-primary);
  --element-selected-outline-stroke-color: var(--el-color-primary);
  --element-selected-outline-secondary-stroke-color: var(--el-color-primary-light-5);
  --lasso-fill-color: var(--el-fill-color-extra-light);
  --lasso-stroke-color: var(--element-selected-outline-stroke-color);

  // --palette-entry-color: var(--color-grey-225-10-15);
  // --palette-entry-hover-color: var(--el-color-primary);
  // --palette-entry-selected-color: var(--el-color-primary);
  // --palette-separator-color: var(--color-grey-225-10-75);
  // --palette-toggle-hover-background-color: var(--color-grey-225-10-55);
  // --palette-background-color: var(--color-grey-225-10-97);
  // --palette-border-color: var(--color-grey-225-10-75);
  --popup-font-size: 14px;
  --popup-header-entry-selected-color: var(--el-color-primary);
  --popup-header-font-weight: bolder;
  --popup-background-color: var(--el-fill-color-blank);
  --popup-border-color: transparent;
  --popup-shadow-color: var(--el-box-shadow-dark);
  --popup-description-color: var(--el-text-color-primary);
  --popup-no-results-color: var(--el-text-color-primary);
  --popup-entry-title-color: var(--el-text-color-primary);
  --popup-entry-hover-color: var(--el-color-primary);
  --popup-search-border-color: var(--el-border-color);
  --popup-search-focus-border-color: var(--el-color-primary);
  --popup-search-focus-background-color: var(--el-fill-color-blank);
  --resizer-fill-color: var(--el-color-primary);
  --resizer-stroke-color: var(--canvas-fill-color);

  // --search-container-background-color: var(--color-grey-225-10-97);
  // --search-container-border-color: var(--el-color-primary);
  // --search-container-box-shadow-color: var(--el-fill-color-blank);
  // --search-container-box-shadow-inset-color: var(--color-grey-225-10-80);
  // --search-input-border-color: var(--el-border-color);
  // --search-result-border-color: var(--el-border-color);
  // --search-result-highlight-color: var(--color-black);
  // --search-result-selected-color: var(--el-color-primary-light-7);
  --shape-attach-allowed-stroke-color: transparent;
  --shape-connect-allowed-fill-color: transparent;
  --shape-drop-allowed-fill-color: transparent;
  --shape-drop-not-allowed-fill-color: var(--el-color-error);
  --shape-resize-preview-stroke-color: var(--el-color-primary);
  --snap-line-stroke-color: var(--el-text-color-primary);
  --space-tool-crosshair-stroke-color: var(--el-text-color-primary);
  --tooltip-error-background-color: var(--el-color-error-light-9);
  --tooltip-error-border-color: var(--el-color-error);
  --tooltip-error-color: var(--el-color-error);
}

:root {
  --token-simulation-green-base-44: var(--el-color-primary);
  --token-simulation-grey-base-40: var(--el-text-color-disabled);
  --token-simulation-grey-darken-30: var(--el-text-color-regular);
  --token-simulation-grey-lighten-56: var(--el-fill-color-darker);
  --token-simulation-red-base-62: var(--el-color-error);
  --token-simulation-silver-base-97: var(--el-fill-color);
  --token-simulation-silver-darken-94: var(--el-fill-color-blank);
  --token-simulation-white: #ffffff;
}

.djs-minimap {
  background-color: rgba(255, 255, 255, 0.6);
  border: solid 1px var(--el-color-primary);

  .viewport-dom {
    border: 2px solid var(--el-color-primary);
  }
}

.dark {
  .djs-minimap {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

.djs-popup-search {
  color: var(--el-text-color-regular);

  .djs-popup-search-icon {
    path {
      fill: var(--el-text-color-regular) !important;
    }
  }

  input {
    background-color: var(--el-fill-color-blank);

    &:focus {
      border-color: var(--el-color-primary);
    }
  }
}

.djs-popup .entry.selected {
  &::before {
    color: var(--el-color-white);
  }

  .djs-popup-label,
  .djs-popup-entry-name::before,
  .djs-popup-entry-icon {
    color: var(--el-color-white);
  }
}

.djs-context-pad .entry {
  box-shadow: none;
}

.djs-direct-editing-parent {
  background: transparent !important;
  border: 2px solid var(--el-color-primary) !important;
  border-radius: 5px;

  .djs-direct-editing-content {
    padding: 4px 5px !important;
  }
}

.djs-connection-preview {
  path {
    stroke: var(--el-text-color-regular) !important;
  }
}

.layer-base {
  g {
    path {
      fill: transparent !important;
      stroke: transparent !important;
    }
  }
}

.bjsl-issues {
  color: var(--el-text-color-regular);
  background: var(--el-fill-color-blank);
  border: solid 1px var(--el-border-color);
}

.bjsl-issues li {
  align-items: center;
}

.bjsl-icon {
  background: white;
}

.bjsl-icon-error {
  color: white;
  background-color: var(--el-color-error);

  /* color: #cc3300; */
}

.bjsl-icon-warning {
  color: white;
  background-color: var(--el-color-warning);

  /* color: #f7c71a; */
}

.bjsl-issues .error svg {
  color: var(--el-color-error);
}

.bjsl-issues .warning svg {
  color: var(--el-color-warning);
}

.bjsl-issues a {
  margin-left: 8px;
  color: var(--el-text-color-regular);
}

.bjsl-child-issues hr {
  border-top: 1px solid var(--el-border-color);
}

.bjsl-id-hint {
  background-color: var(--el-fill-color-blank);
}

.bjsl-button {
  color: var(--el-text-color-disabled);
  background-color: var(--el-fill-color-blank);
}

.bjsl-button svg {
  margin-top: 0;
}

.bjsl-button-inactive:hover {
  color: var(--el-text-color-regular);
}

.bjsl-button-success {
  color: white;
  background-color: var(--el-color-success);
}

.bjsl-button-error {
  color: white;
  background-color: var(--el-color-error);
}

.bjsl-button-warning {
  color: white;
  background-color: var(--el-color-warning);
}

.bts-set-animation-speed .bts-animation-speed-button {
  background: none;
}

.bts-log .bts-header {
  align-items: center;
}

.bts-log .bts-entry {
  background: var(--el-bg-color);
}

.bts-notifications .bts-notification.info {
  color: var(--el-text-color-regular);
}

.bts-element-notification {
  line-height: 0;

  .bts-text {
    margin: 0 3px 0 6px;
  }
}
